<template>
  <div class="remove-water-main">
    <span style="color: red;">注意：请在下方输入框内输入从抖音分享的链接</span>
    <br>
    <el-input
        class="remove-water-text"
        type="textarea"
        :rows="2"
        placeholder="请输入将复制好的抖音链接粘贴至此"
        v-model="textarea">
    </el-input>
    <br>
    <el-button class="confirm" type="primary" round @click="confirm">开始解析视频链接</el-button>
    <br>

    <div class="pre-div" v-if="douyinurl">
      <span style="color: red">注意：鉴于有太多网友不懂如何下载视频，请按照如下操作进行：1、电脑端，请复制解析出来的地址。2、浏览器访问解析出来的地址。3、右键视频另存为到本地上</span>
      <br>
      <pre>{{ douyinurl }}</pre>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "RemoveWater",
  data() {
    return {
      textarea: '',
      douyinurl: ''
    }
  },
  methods: {
    //https://www.iesdouyin.com/web/api/v2/aweme/iteminfo?
    confirm() {
      const _this = this;
      const urlReg = /(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?/ig;
      const urlArrray = this.textarea.match(urlReg);
      console.log(urlArrray[0])
      axios.get('/api/douyin/removeWater',{params: {
          url: urlArrray[0]
        }})
          .then(function (response) {
            console.log(response.data);
            _this.douyinurl = response.data
          })
          .catch(function (error) {
            console.log(error);
          });
      // const pReg = /([a-z\d]+)(\/*|)$/i;
      // const parameter = urlArrray[0].trim().split('/').slice(3)
      // console.log(parameter)
      // for (let i = parameter.length-1; i >= 0; i--) {
      //   debugger
      //   if (parameter[i]) {
      //     axios.get('', {
      //       params: {
      //         item_ids: parameter[i]
      //       }
      //     })
      //         .then(function (response) {
      //           console.log(response);
      //         })
      //         .catch(function (error) {
      //           console.log(error);
      //         });
      //   }
      // }

    }
  }
}
</script>

<style scoped>
.remove-water-text {
  width: 50%;
}

.remove-water-main {
  text-align: center;
}

.confirm {
  margin-top: 30px;
  width: 300px;
}
pre{
  margin: 25px 0;
  font: 13px/20px 'courier new';
  background: #272822;
  color: #F8F8D4;
  border: none;
  padding: 10px 0;
}
.pre-div{
  width: 50%;
  margin: 0 auto;
  padding-top: 10px;
}
</style>
